<template>
    <div class="out_box">
        <div class="relative content_box">
            <div class="case_box logs_box mb_20">
                <div class="title cl">
                    <h2 class="f_l">
                        我的团队
                    </h2>
                </div>
                <div class="content gray_table text_c">
                    <v-data-table :data='getData' :currentData='dataTable' :columns='columnsData' stripe :emptyText="not_data">
                        <template slot="td" slot-scope="props">
                            <span class="font_orange" v-if="props.column.field === 'total'">{{ props.content }}</span>
                            <span class="" v-else-if="props.column.field === 'other'">0</span>
                            <span v-else>{{ props.content }}</span>
                        </template>
                    </v-data-table>
                </div>
            </div>
            <div class="case_box menu_box mb_20">
                <div class="title cl">
                    <h2 class="f_l">
                        我的成绩
                    </h2>
                </div>
                <div class="content">
                    <div class="box_main cl">
                        <div class="list">
                            <div class="box">
                                <p class="title">{{ $numberAddComma(dataList.orderMoney) }}</p>
                                <p class="tips">{{ '≈ ￥' + $convertRMB(dataList.orderMoney) }}</p>
                                <p class="text">累计销售佣金 (USDT)</p>
                            </div>
                        </div>
                        <div class="list">
                            <div class="box">
                                <p class="title">{{ $numberAddComma(dataList.powerMoney) }}</p>
                                <p class="tips">{{ '≈ ￥' + $convertRMB(dataList.powerMoney) }}</p>
                                <p class="text">累计挖矿佣金 (USDT)</p>
                            </div>
                        </div>
                        <div class="list">
                            <div class="box">
                                <p class="title">{{ $numberAddComma(dataList.lastMonthOrderMoney) }}</p>
                                <p class="tips">{{ '≈ ￥' + $convertRMB(dataList.lastMonthOrderMoney) }}</p>
                                <p class="text">上月销售总额 (USD)</p>
                            </div>
                        </div>
                        <div class="list">
                            <div class="box">
                                <p class="title">{{ $numberAddComma(dataList.lastMonthPowerMoney) }}</p>
                                <p class="tips">{{ '≈ ￥' + $convertRMB(dataList.lastMonthPowerMoney) }}</p>
                                <p class="text">上月挖矿佣金 (USDT)</p>
                            </div>
                        </div>
                    </div>
                    <div class="box_sub cl">
                        <div class="list_sub">
                            <p class="title">{{ dataList.directSalescale + '%' }}</p>
                            <p class="text">本月直接推荐销售佣金提成比例</p>
                        </div>
                        <div class="list_sub">
                            <p class="title">{{ dataList.directPowerscale + '%' }}</p>
                            <p class="text">本月直接推荐挖矿佣金提成比例</p>
                        </div>
                        <div class="list_sub">
                            <p class="title">{{ dataList.indirectSalescale + '%' }}</p>
                            <p class="text">本月间接推荐销售佣金提成比例</p>
                        </div>
                        <div class="list_sub">
                            <p class="title">{{ dataList.indirectPowerscale + '%' }}</p>
                            <p class="text">本月间接推荐挖矿佣金提成比例</p>
                        </div>
                    </div>
                    <div class="progress_box relative">
                        <div class="percent_box">
                            <span class="list">10%</span>
                            <span class="list">12%</span>
                            <span class="list">15%</span>
                        </div>
                        <v-progress-line class="progess" :percent="dataList.thisMonthOrderMoney / 300" :show-info="false" :stroke-width="7"></v-progress-line>
                        <div class="mark_box cl">
                            <span class="list">10,000 USD</span>
                            <span class="list">30,000 USD</span>
                        </div>
                    </div>
                    <div class="tips_box">
                        <p>本月直接推荐累计销售金额为：<span class="val">{{ $numberAddComma(dataList.thisMonthOrderMoney) }} <span class="unit">USD</span></span></p>
                        <p>下月执行提成比例为：<span class="val">{{ dataList.directNextMonthSalescale + '%' }}</span>，距离下一阶梯提成级别 <span class="val">{{ dataList.nextRungRoyaltylevel + '%' }}，</span>还差 <span class="val">{{ $numberAddComma(dataList.targetDifferAmount) }} <span class="unit">USD</span></span></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import { getTeamInfo } from '@doapis/personal/team.js';

    export default {
        name: "MyTeam",
        data: function() {
            return {
                dataList: {
                    thisMonthOrderMoney: 0
                },
                dataTable: [],
                columnsData:[
                    { title:"类型", field:'type', width: '20%' },
                    { title:"直接推荐(人)", field:'direct', width: '20%' },
                    { title:"间接推荐(人)", field:'indirect', width: '20%' },
                    { title:"其它(人)", field:'other', width: '20%' },
                    { title:"合计(人)", field:'total', width: '20%' },
                ],
            }
        },
        computed: {
            userDATA: function() {
                const userDATA = this.$store.state.userDATA;
                return userDATA;
            }
        },
        methods: {
            getData: function(params) {
                const that = this;
                return params ? $.$getPromiseNullData() : getTeamInfo({ memberid: that.userDATA.memberid }).then(function(res) {
                    let data = res.data.data;
                    that.dataList = data;
                    that.dataTable = [{
                        type: '注册',
                        direct: data.directNumber,
                        indirect: data.indirectNumber,
                        other: data.otherNumber,
                        total: data.countNumber,
                    }, {
                        type: '购买',
                        direct: data.directBuyNumber,
                        indirect: data.indirectBuyNumber,
                        other: data.otherBuyNumber,
                        total: data.countBuyNumber,
                    }];
                });
            },
            $convertRMB: $.$convertRMB,
            $numberAddComma: $.$numberAddComma
        },
        mounted: function() {
            this.getData();
        }
    };
</script>

<style lang="less" scoped>
    @import '~@css/root.less';

    .out_box{
        background-color: #eaeaea;
    }
    .content_box{
        .case_box{
            >.title{
                padding: 16px 20px;
                font-size: 13px;
                color: white;
                background: linear-gradient(225deg, #56ccf2 0%, #2948ff 100%);
            }
        }
        .logs_box{
            .content{
                font-size: 16px;
                margin-bottom: 10px;
                /deep/ .ant-table-tbody>tr:nth-child(2n-1){
                    background-color: #EFEFF4;
                }
            }
        }
        .menu_box{
            text-align: center;
            background-color: white;
            .box_main .list{
                float: left;
                width: 50%;
                box-sizing: border-box;
                .box{
                    margin: 0 0 30px 0;
                    padding: 30px 0 0 0;
                }
                &:nth-child(-n+2)>.box{
                    margin: 30px 0 0 0;
                    padding: 0 0 30px 0;
                }
                &:nth-child(2n)>.box{
                    border-left: 1px solid #EDEDED;
                }
                .title{
                    font-size: 24px;
                    line-height: 34px;
                    .font_orange;
                }
                .tips{
                    margin: 4px 0;
                    font-size: 13px;
                    .font_gray;
                }
            }
            .box_sub{
                padding: 0 30px;
                .list_sub{
                    float: left;
                    width: 25%;
                    padding: 20px;
                    box-sizing: border-box;
                    .title{
                        font-size: 18px;
                        line-height: 26px;
                        .font_orange;
                    }
                    .text{
                        margin: 4px 0;
                        font-size: 13px;
                        line-height: 16px;
                    }
                }
            }
            .progress_box{
                margin: 20px 60px;
                .progess{
                    /deep/ .ant-progress-bg{
                        background: linear-gradient(270deg,#ff3c00 0%,#eeaf00 100%);
                    }
                }
                .percent_box{
                    .list{
                        float: left;
                        width: 33.33%;
                        font-size: 16px;
                        .font_theme;
                        font-weight: 700;
                        text-align: center;
                    }
                }
            }
            .mark_box{
                margin-top: 40px;
                text-align: left;
                .list{
                    float: left;
                    position: relative;
                    margin-left: 24.99%;
                    &:nth-child(2){
                        float: right;
                        margin-left: 0;
                        margin-right: 24.99%;
                    }
                    &:before{
                        content: '';
                        position: absolute;
                        bottom: 100%;
                        left: 50%;
                        width: 0;
                        height: 98px;
                        border-left: 1px dashed #999;
                    }
                }
            }
            .tips_box{
                padding: 20px;
                font-size: 10px;
                text-align: left;
                .font_gray;
                .val{
                    font-size: 18px;
                    .font_orange;
                    .unit{
                        font-size: 10px;
                    }
                }
            }
        }
    }
</style>
